<template>
  <div ref="rank">
    <!-- 头部 -->
    <div class="hot_header">
      <p class="h_title">云音乐</p>
      <h1 class="h_name">飙升榜</h1>
      <p class="h_date">更新日期：{{ time }}</p>
    </div>
    <!-- 加载中 -->
    <van-loading v-if="$store.state.loading" vertical size="24px"
      >加载中...</van-loading
    >
    <!-- 歌曲列表 -->
    <song-list
      v-for="(song, idx) in get_songs"
      :key="song.id"
      :name="song.name"
      :singer="song.ar"
      :id="song.id"
      :duration="song.dt"
      :id_list="id_list"
      :idx="idx"
    >
      <div class="index" :class="{ act_color: idx < 3 }">
        {{ (idx + 1).toString().padStart(2, 0) }}
      </div>
    </song-list>
    <!-- 底部加载 -->
    <van-loading v-if="num < 100" type="spinner" color="#d43c33" />
  </div>
</template>

<script>
import SongList from "@/components/common/SongList";
import { get_toplist, get_ss_detail } from "@/api/rank.js";
export default {
  data() {
    return {
      // 排行榜
      rank: [],
      // 飙升榜
      songs: [],
      // 显示的数量
      num: 20,
    };
  },
  components: {
    SongList,
  },
  async created() {
    // 排行榜
    let top_list = await get_toplist();
    this.rank = top_list.data.list[0];
    // 飙升榜
    let soar_rank = await get_ss_detail(this.rank.id);
    this.songs = soar_rank.data.playlist.tracks;
  },
  deactivated() {
    // 失活取消上拉加载
    window.removeEventListener("scroll", this.getbottom);
  },
  activated() {
    // 激活添加上拉加载
    window.addEventListener("scroll", this.getbottom);
  },
  computed: {
    // 显示数量
    get_songs() {
      return this.songs.slice(0, this.num);
    },
    // 格式化时间
    time() {
      let date = new Date(this.rank.updateTime);
      let month = (date.getMonth() + 1).toString().padStart(2, 0);
      let day = date
        .getDate()
        .toString()
        .padStart(2, 0);
      return month + "月" + day + "日";
    },
    // 使用计算属性来筛选出 新歌榜 内所有歌曲的 id 集合
    id_list() {
      return this.get_songs.map((el) => el.id);
    },
  },
  methods: {
    // 触底事件
    getbottom() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      let numHeight = scrollTop + clientHeight;
      if (
        scrollHeight > clientHeight &&
        numHeight > scrollHeight - 1 &&
        this.num < 100
      ) {
        this.num += 10;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hot_header {
  height: 146px;
  background-color: #a65343;
  color: #fff;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .h_title {
    font-style: italic;
  }
  .h_name {
    font-size: 46px;
  }
  .h_date {
    margin-top: 5px;
    font-size: 12px;
  }
}
.index {
  width: 40px;
  text-align: center;
  font-size: 18px;
  flex-shrink: 0;
}
.act_color {
  color: #df3436;
}
.van-loading {
  text-align: center;
}
</style>
